<template>
  <div class="collect-list">
    <van-nav-bar
      title="我的预定"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" color="#E65D6E"/>
      </template>
    </van-nav-bar>
    <van-list class="reserve-list">
      <div>
        <div>7月6日</div>
        <div class="reserve-item">
          <div class="  reserve-card" v-for="i in 10" :key="i">
            <van-image width="100" height="100" lazy-load
                       src="https://pic.vslai.com.cn/upload/5657/2021/05/28/17/1622194046368.jpg"/>
              <div class="pro-info">
                <span>¥<span class="reserve-num">18</span></span>
                <span  class="sold-count">已售100件</span>
              </div>

          </div>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script>
export default {
  name: 'collect',
  methods: {
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.collect-list {
  flex: 1;
  height: 100%;
}
.reserve-list{
  padding: 10px;
}
.reserve-item {
  justify-content: space-between;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
}

.reserve-card {
  width: calc(100% / 3 - 24px);
}
.reserve-card{
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  margin-top: 10px;
  font-size: 12px;
  color: #E65D6E;
}
.reserve-num{
  font-size: 18px;
}
.pro-info{
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sold-count{
  font-size: 10px;
  color: #c5c5c5;
}
</style>
